import React, {Component} from 'react';
import {Button, Row, Table, Col, Pagination} from 'antd';
import "../css/roleAssignment.css";
import moment from 'moment';
import app from '../AppMethod';
import {takeOutput} from '../value';
import {ChoosePrinters, CheckBtnStarts, CheckBtns} from '../components/EditComponent';
import {config} from "../config";

class CheckOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            pagination: {
                current: 0,
                total: 0,
                pagination: 0
            },
            allPage: 0,
            data: [],
        }
    };

    columns = [
        // {
        //     title: '配货开始时间',
        //     dataIndex: 'output_pick_time',
        //     className: 'tableItem',
        //     align: 'center'
        // },
        {
            title: '配货结束时间',
            dataIndex: 'output_pick_end_time',
            className: 'tableItem',
            align: 'center'
        },
        {
            title: '交货期限',
            dataIndex: 'output_delivery_time',
            className: 'tableItem',
            align: 'center'
        },
        {
            title: '订单号',
            dataIndex: 'output_num',
            align: 'center'
        },
        {
            title: '客户名称',
            dataIndex: 'customer_name',
            align: 'center',
        },
        {
            title: '配货人',
            dataIndex: 'output_pick_name',
            align: 'center'
        },
        {
            title: '物流类型',
            dataIndex: 'output_logistics',
            align: 'center'
        },
        {
            title: '类型',
            dataIndex: 'output_type',
            align: 'center'
        },
        {
            title: '状态',
            dataIndex: 'output_check_status',
            align: 'center',
            render: output_check_status => {
                let text = '';
                if (output_check_status == 0) {
                    text = '未开始';
                } else if (output_check_status == 1) {
                    text = '有异常';
                } else if (output_check_status == 2) {
                    text = '正常';
                }
                return (
                    <span>{text}</span>
                )
            }
        },
        {
            title: '操作',
            dataIndex: this.columns,
            align: 'center',
            render: data => {
                return (
                    <span>
                        <ChoosePrinters type="3" handlePrintCar={(ip)=>this.handlePrintCar(data.output_id,ip)} />
                        <Button style={{marginLeft: '10px', marginTop: '5px'}} type="primary"
                                onClick={() => this.handleGetDetail(data.output_id)}>详情</Button>
                        {
                            data.output_check_status == 0 ?
                                <CheckBtnStarts handleCheckOrder={() => this.handleCheckOrder(data.output_id)}/> :
                                <CheckBtns handleRefresh={() => this.handleSearchOrderList()}
                                           status={data.output_check_status} output_id={data.output_id}
                                           output_package={data.output_package} output_single={data.output_single}/>
                        }
                    </span>
                )
            }
        }
    ];

    render() {
        return (
            <div>
                <div style={{background: '#fff'}}>
                    <div className="orderDetailTitle">待对单</div>
                </div>
                <div style={{background: '#fff', minHeight: 280, paddingTop: 60}}>
                    <Row>
                        <Table
                            columns={this.columns}
                            //rowKey={record => record.order_number}
                            rowKey={(record, index) => index}
                            loading={this.state.loading}
                            dataSource={this.state.data}
                            pagination={false}
                            size={'middle'}
                        >
                        </Table>
                    </Row>
                    <Row style={{marginTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}>
                        <Col span={12} style={{fontSize: '15px'}}>
                            共 {this.state.pagination.total} 条记录 第 {this.state.pagination.current} / {this.state.allPage}
                            页
                        </Col>
                        <Col span={12} style={{textAlign: 'right'}}>
                            <Pagination {...this.state.pagination} showSizeChanger={true} showQuickJumper={true}
                                        onChange={(page, pageSize) => this.handlePageChange(page, pageSize)}
                                        onShowSizeChange={(current, size) => this.handleSizeChange(current, size)}
                                        hideOnSinglePage={true}/>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    };

    componentDidMount() {
        this.handleSearchOrderList();
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    }

    /**
     * 查询待对单列表
     * @param data
     */
    handleSearchOrderList(data = {page: 1, size: 10, output_status: "3"}) {
        this.setState({loading: true});
        app.post(takeOutput.SEARCH_OUTPUTLIST, data).then((result) => {
            if (result.code === 1) {
                let count = result.data.count;
                let pagination = {
                    current: data.page,
                    pageSize: data.size,
                    total: count
                };
                let allPage;
                if (count % data.size > 0) {
                    allPage = parseInt(count / data.size) + 1;
                } else {
                    allPage = count / data.size;
                }
                let orderData = result.data.dataSet;
                for (let i = 0; i < orderData.length; i++) {
                    orderData[i].output_delivery_time = orderData[i].output_delivery_time === null ? '' : moment(orderData[i].output_delivery_time).format('YYYY-MM-DD');
                    orderData[i].output_pick_time = orderData[i].output_pick_time === null ? '' : moment(orderData[i].output_pick_time).format('YYYY-MM-DD HH:mm');
                    orderData[i].output_pick_end_time = orderData[i].output_pick_end_time === null ? '' : moment(orderData[i].output_pick_end_time).format('YYYY-MM-DD HH:mm');
                }
                this.setState({allPage, pagination, data: orderData, loading: false});
            } else {
                let pagination = {
                    current: 0,
                    pageSize: 0,
                    total: 0
                };
                let allPage = 0;
                this.setState({allPage, pagination, data: [], loading: false});
            }
        })
    };

    /**
     * 处理分页跳转事件
     * @param page
     * @param size
     */
    handlePageChange(page, size) {
        let data = {};
        data.page = page;
        data.size = size;
        this.handleSearchOrderList(data);
    };

    /**
     * 处理页数变化事件
     * @param current
     * @param size
     */
    handleSizeChange(current, size) {
        let data = {};
        data.page = current;
        data.size = size;
        this.handleSearchOrderList(data);
    };

    /**
     * 跳转到详情页面
     * @param id
     */
    handleGetDetail(id) {
        this.props.history.push(config.path + `/orderDetails/${id}`);
    };

    /**
     * 跳转到对单详情页面
     * @param id
     */
    handleCheckOrder(id) {
        this.props.history.push(config.path + `/checkOrderDetail/${id}`);
    };

    /**
     * 处理打印事件
     * @param id
     */
    handlePrintCar(id,ip){
        app.handlePrintCheckOrder(id,ip);
    };

};

export default CheckOrder;